<template>
  <div>
    <el-button v-if="type == 'button'" type="primary" @click="handleFetchContentDetail(detailDialogTitle)">{{amapSelectTagContent}}</el-button>
    <span v-if="type == 'link'" class="link-type content" @click="handleFetchContentDetail(detailDialogTitle)">{{amapSelectTagContent}}</span>
    <el-dialog :title="detailDialogTitle" :visible.sync="dialogVisible" width="70%" center append-to-body :close-on-click-modal='false' :show-close='false' :close-on-press-escape='false'>
      <span class="customclass">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
        <el-amap ref="map" vid="amapDemo" :zoom="zoom" class="amap-demo" :events="events" :amap-manager="amapManager" :center="center">
          <el-amap-marker :position="marker.position" :icon='officePositionPng' :events="events" :visible="marker.visible" :draggable="marker.draggable" :vid="1"></el-amap-marker>
          <el-amap-marker v-for="(marker,index) in markers" :position="marker" :events="events" v-bind:key="index" clickable=false></el-amap-marker>
        </el-amap>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmSelect">确 定</el-button>
        <el-button size="small" type="button" @click="closeMe">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueAMap from "vue-amap";
import officePositionPng from "@/assets/officePosition.png";

let amapManager = new VueAMap.AMapManager();

export default {
  name: "AmapSelect",
  props: {
    positionX: {
      type: String
    },
    positionY: {
      type: String
    },
    contentDetail: String,
    detailDialogTitle: String,
    type: {
      type: String,
      default: "button"
    },
    mapHeight: {
      type: String,
      default: "100%"
    },
    draggable: {
      type: Boolean,
      default: true
    },
    amapSelectTagContent: String
  },
  data() {
    return {
      dialogVisible: false,
      markers: [],
      zoom: 14,
      officePositionPng: officePositionPng,
      // AMapManager,
      center: [process.env.GAODE_MAP_DEFAULTX, process.env.GAODE_MAP_DEFAULTY],
      events: {
        init: o => {
          // console.log("*******************************");
          // console.log(this.$refs.map.$$getInstance());
          // console.log("*******************************");
          // o.getCity(result => {
          //   console.log(result);
          // });
        },
        click: e => {
          this.addMarker(e);
        }
      },
      searchOption: {
        city: "全国",
        citylimit: false
      },

      amapManager,
      marker: {
        position: [
          process.env.GAODE_MAP_DEFAULTX,
          process.env.GAODE_MAP_DEFAULTY
        ],
        visible: true,
        draggable: false,
        template: "<span>1</span>"
      }
    };
  },
  methods: {
    // 详细内容handler
    handleFetchContentDetail(detailDialogTitle) {
      if (amapManager._map) {
        amapManager._map.setZoom(14);
      }
      if (this.positionX) {
        this.marker.position = [this.positionX, this.positionY];
        this.center = [this.positionX, this.positionY];
      } else {
        this.marker.position = [
          process.env.GAODE_MAP_DEFAULTX,
          process.env.GAODE_MAP_DEFAULTY
        ];
        this.center = [
          process.env.GAODE_MAP_DEFAULTX,
          process.env.GAODE_MAP_DEFAULTY
        ];
      }
      this.detailDialogTitle = detailDialogTitle;
      this.dialogVisible = true;
    },
    confirmSelect() {
      this.dialogVisible = false;
      this.markers = [];
      this.$emit("getPosition", this.marker.position);
    },
    closeMe() {
      this.dialogVisible = false;
      this.markers = [];
    },
    addMarker(MapsEvent) {
      this.marker.position = [MapsEvent.lnglat.lng, MapsEvent.lnglat.lat];
      this.center = [MapsEvent.lnglat.lng, MapsEvent.lnglat.lat];
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
      }
    }
  }
};
</script>
<style scoped></style>
.customclass {
  position: relative;
  display: block;
  height: 300px;
}
.search-box {
  position: absolute !important;
  display: block;
  left: 20px;
}
</style>
